import { Image } from 'antd';
import IsDisabled from './IsDisabled';
import styles from './index.less';

interface columnsProps {
  handleChangeOn: (record: any) => void;
  handleChangeRecommend: (record: any) => void;
  handleEdit: (record: any) => void;
}

const columns = ({
  handleChangeOn,
  handleEdit,
  handleChangeRecommend,
}: columnsProps) => {
  return [
    {
      title: '商品图',
      dataIndex: 'cover_url',
      width: 100,
      align: 'center',
      render: (_text: any, record: any) => (
        <Image width={64} src={record.cover_url} />
      ),
    },
    {
      title: '商品名称',
      dataIndex: 'title',
      width: 150,
    },
    {
      title: '价格',
      dataIndex: 'price',
      align: 'center',
      width: 70,
    },
    {
      title: '库存',
      dataIndex: 'stock',
      align: 'center',
      width: 70,
    },
    {
      title: '销量',
      dataIndex: 'sales',
      align: 'center',
      width: 70,
    },
    {
      title: '是否上架',
      dataIndex: 'is_on',
      align: 'center',
      width: 150,
      render: (_text: any, record: any) => (
        <IsDisabled
          isChecked={record.is_on}
          onChecked={() => handleChangeOn(record.id)}
          checkedChildren={'已上架'}
          unCheckedChildren={'未上架'}
        />
      ),
    },
    {
      title: '是否推荐',
      dataIndex: 'is_recommend',
      align: 'center',
      width: 150,
      render: (_text: any, record: any) => (
        <IsDisabled
          isChecked={record.is_recommend}
          onChecked={() => handleChangeRecommend(record.id)}
          checkedChildren={'已推荐'}
          unCheckedChildren={'未推荐'}
        />
      ),
    },
    {
      title: '创建时间',
      dataIndex: 'created_at',
      width: 200,
    },
    {
      title: '操作',
      dataIndex: 'action',
      align: 'center',
      render: (_text: any, record: any) => (
        <span onClick={() => handleEdit(record)} className={styles.editBtn}>
          编辑
        </span>
      ),
    },
  ];
};

export default columns;
